<template>
	<view class="page">
		<!-- 科室时间信息 -->
		<view class="basciInfo">
			<view class="text">
				{{hospital.department}}
			</view>
			<view class="dates">
				<image style="width: 36rpx;margin-right: 14rpx;"
					src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u800.svg"
					mode="widthFix"></image>
				<view class="text">
					{{currentDate.getFullYear()}}年{{(currentDate.getMonth() + 1).toString().padStart(2, '0')}}月
				</view>
			</view>
		</view>
		<!-- 日期选择 -->
		<view class="date">
			<view class="alldates">
				全部日期
			</view>
			<image style="width: 4rpx; margin-right: 20rpx;"
				src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u756.svg"
				mode="widthFix"></image>
			<view class="datelists">
				<scroll-view class="datelist" :class="{active:item.id==date,active2:index==3 || index==4}" scroll-x="true" v-for="(item,index) in datelists" :key="index" @click="dateTab(item.id)">
					<view class="wenzi">
						{{item.weekDay}}
					</view>
					<view class="wenzi">
						{{item.isToday?'今日':item.day}}
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 医生列表 -->
		<view class="doctorlists">
			<view class="doctorlist" v-for="(item,index) in dutylists" :key="index" v-if="dutylists.length" @click="doctorschedu(item.doctor_id)">
				<image style="width: 90rpx;" :src="item.avator" mode="widthFix"></image>
				<view class="doctorInfo">
					<view class="doctor">
						<view class="name">
							{{item.name}}
						</view>
						<view class="call">
							{{item.call}}
						</view>
					</view>
					<view class="depart">
						{{hospital.department?hospital.department:'中医外'}}
					</view>
					<view class="introduction">
						擅长：肛肠外科（肛肠良性基本），结直肠微创手...
					</view>
				</view>
				<view class="source" v-if="item.totalNumber">
					余{{item.totalNumber}}号
				</view>
				<view class="full" v-else>
					已约满
				</view>
			</view>
			<image src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" class="empty" v-else></image>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import api from '../../src/utils/api.js'
import { getWeekDates } from '../../src/utils/date.js'
import { onLoad } from '@dcloudio/uni-app'
	const hospital = reactive({
		campus:'',
		depart:'',
		department:'门诊外一科'
	})
	// 获取当天日期医生排班情况
	const dutylists = reactive([])	//医生值班可预约列表
	const getSecdul = (datesId=1) => {
		dutylists.splice(0)
		doctorlists.forEach((item,index)=>{
			api('/scheduDate',{
				datesId:datesId,
				doctorId:item.doctor_id
			}).then(res=>{
				if(res[0]){
					item.totalNumber=res[0].timeOne+res[0].timeTwo+res[0].timeThree+res[0].timeFour+res[0].timeFive+res[0].timeSix+res[0].timeSeven+res[0].timeEight
					dutylists.push(item)
				}
			}).catch(err=>{
				console.log(err)
			})
		})
		
	}
	// 初始加载生命周期
	const doctorlists = reactive([])		//医生列表
	const datelists  =  reactive([])		//日期列表
	const currentDate = new Date();			//当前日期
	onLoad((option)=>{
		// console.log(getWeekDates(),'日期列表')
		console.log(JSON.parse(option.hospital))
		datelists.push(...getWeekDates())
		hospital.campus = JSON.parse(option.hospital).campus
		hospital.depart = JSON.parse(option.hospital).depart
		hospital.department = JSON.parse(option.hospital).department
		api('/doctorlists',{id:JSON.parse(option.hospital).id}).then(res=>{
			// console.log(res,'医生列表')
			doctorlists.push(...res)
			getSecdul()
		}).catch(err=>{
			console.log(err)
		})
	})
	
	// 查看医生排班
	const doctorschedu = (id) => {
		uni.navigateTo({
			url:'/pages/Doctor_scheduling/Doctor_scheduling?doctorID='+id
		})
	}
	const date = ref(1)
	
	// 日期切换
	const dateTab = (id) => {
		date.value=id
		getSecdul(id)
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2;
		min-height: 100vh;

		.basciInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			.text {
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-weight: 700;
				font-size: 28rpx;
				color: #000;
			}

			.dates {
				display: flex;
				align-items: center;
			}
		}

		// 日期选择
		.date {
			width: 100%;
			height: 148rpx;
			background-color: #fff;
			padding: 26rpx;
			padding-right: 36rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.alldates {
				width: 70rpx;
				text-align: center;
				padding-right: 30rpx;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 24rpx;
				color: #1677FF;
				line-height: 34rpx;
			}
			// .datelists::-webkit-scrollbar{
			// 	display: none;
			// }
			.datelists {
				width: 600rpx;
				display: flex;
				align-items: center;
				// white-space: nowrap; /* 防止内容换行 */
				overflow-x: auto;
				.datelist {
					flex: 0 0 116rpx;
					width: 116rpx;
					height: 94rpx;
					text-align: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #13C2C2;
					line-height: 47rpx;
					border-radius: 10rpx;
				}
				.active{
					background-color: rgba(22, 119, 255, 1);
					color: #fff !important;
				}
				.active2{
					color: #aaa;
				}
			}
		}
		// 医生列表
		.doctorlists{
			position: relative;
			.doctorlist{
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				margin-top: 30rpx;
				padding: 32rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				// align-items: center;
				position: relative;
				.doctorInfo{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					margin-left: 30rpx;
					.doctor{
						height: 40rpx;
						display: flex;
						align-items: baseline;
						.name{
							font-size: 32rpx;
							font-weight: 700;
						}
						.call{
							color: #aaa;
							margin-left: 18rpx;
						}
					}
					.depart{
						margin-top: 16rpx;
					}
					.introduction{
						color: #aaa;
						margin-top: 16rpx;
					}
				}
				// 有余号
				.source{	
					width: 114rpx;
					height: 54rpx;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u811.svg');
					background-size: cover;
					position: absolute;
					top: 32rpx;
					right: 40rpx;
					color: #36CFC9;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					text-align: center;
					line-height: 54rpx;
				}
				// 已约满
				.full{
					width: 114rpx;
					height: 54rpx;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u820.svg');
					background-size: cover;
					position: absolute;
					top: 32rpx;
					right: 40rpx;
					color: #FF4D4F;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					text-align: center;
					line-height: 54rpx;
				}
			}
			.empty{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 120rpx;
			}
		}
	}
</style>